On the one hand I can assign a new function to an object with
Object.defineProperty(...).
Then I tried to assign a function directly to the NodeList Prototype. But somehow it doesn't work properly. What am I doing wrong?
Object.defineProperty(
NodeList.prototype,
'lastElement', {
get: function() {
return this[this.length - 1].textContent;
}
}
);
NodeList.prototype.firstElement = () => {
return this[0].textContent;
}
const h = document.querySelectorAll('span');
console.log('#last:', h.lastElement);
console.log('#first:', h.firstElement);<div>
<span>1</span>
<span>2</span>
</div>Arrow functions () => {...} are not just a different syntax that behaves the same way, they actually handle the this keyword differently.
If you switch to using the traditional function syntax, this will behave as you are expecting.
Additionally, you've defined firstElement as a regular function, not a getter function, so you will need to call it like this
console.log('#first:', h.firstElement());
Object.defineProperty(
NodeList.prototype,
'lastElement', {
get: function() {
return this[this.length - 1].textContent;
}
}
);
NodeList.prototype.firstElement = function() {
return this[0].textContent;
}
const h = document.querySelectorAll('span');
console.log('#last:', h.lastElement);
console.log('#first:', h.firstElement());<div>
<span>1</span>
<span>2</span>
</div>